<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>3D旋转轮播图</title>
		<link rel="stylesheet" href="./43-3D旋转轮播图.css">
	</head>
	<style>
		* {
		    margin: 0;
		    padding: 0;
		}
		
		body {
		    height: 100vh;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    overflow: hidden;
		    background-color: #000;
		}
		
		.container {
		    width: 300px;
		    height: 450px;
		    perspective: 1000px;
		    position: relative;
		}
		
		.card-box {
		    position: absolute;
		    width: 100%;
		    height: 100%;
		    transform-style: preserve-3d;
		    transform: rotateY(0) translateZ(-700px);
		    animation: cardRotate 10s cubic-bezier(0.77, 0, 0.175, 1) infinite;
		}
		
		.card {
		    position: absolute;
		    left: 0;
		    right: 0;
		    top: 0;
		    bottom: 0;
		    width: 120%;
		    height: 120%;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
		}
		
		.card img {
		    width: 100%;
		    height: 100%;
		}
		
		.card:nth-child(1) {
		    transform: rotateY(0) translateZ(700px);
		}
		
		.card:nth-child(2) {
		    transform: rotateY(120deg) translateZ(700px);
		}
		
		.card:nth-child(3) {
		    transform: rotateY(240deg) translateZ(700px);
		}
		
		@keyframes cardRotate {
		
		    0%,
		    20% {
		        transform: translateZ(-700px) rotateY(0);
		    }
		
		    45% {
		        transform: translateZ(-700px) rotateY(-120deg);
		    }
		
		    75% {
		        transform: translateZ(-700px) rotateY(-240deg);
		    }
		
		    100% {
		        transform: translateZ(-700px) rotateY(-360deg);
		    }
		}
	</style>
	<body>
		<div class="container">
			<div class="card-box">
				<div class="card">
					<img src="./images/1.jpg" alt="">
				</div>
				<div class="card">
					<img src="./images/2.jpg" alt="">
				</div>
				<div class="card">
					<img src="./images/3.jpg" alt="">
				</div>
			</div>
		</div>
	</body>

</html>